<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center><h1>注册页面</h1></center>

<form action="UsersServlet" method="post" enctype="multipart/form-data">
	<input type="hidden" name="method" value="reg">
	<table align = "center">
	
	<tr>
		<td colspan="2">
			<img alt="" src="" id="icon" style="width:100px;height:100px">
		</td>
	</tr>
		<tr>
			<td>姓名:</td>
			<td>
				<input name="name" placeholder="请输入姓名" title="姓名必须是汉字,至少2位." required pattern="[\u4e00-\u9fa5]{2,}">
			</td>
		</tr>
		<tr>
			<td>性别:</td>
			<td>
				<input type="radio" name="gender" checked value="男">男
				<input type="radio" name="gender" value="女">女
			</td>
		</tr>
		<tr>
			<td>生日:</td>
			<td>
				<input type="date" name="birthday" required>
			</td>
		</tr>
		<tr>
			<td>用户名:</td>
			<td>
				<input name="username" placeholder="请输入用户名" pattern="\w{5,}" required>
			</td>
		</tr>
		<tr>
			<td>密码:</td>
			<td>
				<input type="password" name="password" title="密码至少6位!" placeholder="请输入密码" pattern="\w{6,}" required>
			</td>
		</tr>
		<tr>
			<td>头像:</td>
			<td>
				<input type="file" name="icon" id="file_icon" >
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value="注册"> 
			</td>
		</tr>
	</table>

</form>
<script type="text/javascript">
 document.getElementById("file_icon").addEventListener("change",function(){
	var files = this.files;
	if(files && files.length){
		var file = files[0];
		//获取当前文件类型
		///^image\/png$|jpeg$|gif$/
		var reg = /^image\/(png|jpeg|gif)$/;
		
		if(reg.test(file.type)){
			var imgURL= URL.createObjectURL(file);
			document.getElementById("icon").src=imgURL;
		}else{
			alert("请选择图片文件!");
		}
		
	}
	
	
 });

	
</script>
</body>
</html>



